<template>
  <div class="container">
    <div class="nav">
      <div class="time">{{ localTime }}</div>
      <div class="city" @click="changeCity">追加</div>
	  <div @click="onReset">重置</div>
      <div @click="onCopy">复制</div>
  </div>
  <div class="sjcity">涉及城市：<span v-for="(city,i) in citys">{{city.name}}<span v-if="i !=citys.length-1">、</span></span></div>
	<div v-for="(mapData,i) in mapDatas">
		<div class="city-info">
		  <span class="city">明日：{{ mapData.location.name }}</span>
		  <span class="weather"> {{mapData.forecasts[1].text_day}}</span>
		  <span class="temp">
			<em> {{mapData.forecasts[1].low}}</em>℃ 至 <em> {{mapData.forecasts[1].high}}</em>℃
		  </span>
		  <div class="detail">
			<span>风力: 白天_{{mapData.forecasts[1].wc_day}}  晚上_{{mapData.forecasts[1].wc_night}}</span> | 
			<span>风向: 白天_{{mapData.forecasts[1].wd_day}}  晚上_{{mapData.forecasts[1].wd_night}}</span>
		  </div>
		</div>
	</div>
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" >
      <van-area 
        title="标题" 
        :area-list="areaList" 
        visible-item-count="4"
        @cancel="show = false"
        columns-num="3"
        @confirm="selectCity"
      />
    </van-popup>
  </div>
</template>


<script>
import Vue from 'vue'
import { areaList } from '@vant/area-data';
import VueClipBoard from 'vue-clipboard2'
Vue.use(VueClipBoard)
export default {
  data() {
    return {
      localTime: "",
      mapDatas: [],
      areaList: areaList,
      show: false,
	  citys:[],
    };
  },
  created() {
    this.localTime = this.getLocalTime();
	this.initMap();
  },
  methods: {
    getLocalTime() {
	  var date = new Date((new Date().getTime() + 24*60*60*1000))
	  var year = date.getFullYear();
      var month = date.getMonth() + 1;
	  if(month < 10){
		month = '0'+ month;
	  }
      var dates = date.getDate();
	  if(dates < 10){
		dates = '0' + dates;
	  }
	  var day = date.getDay();
	  var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      return year + '-'+ month +'-'+ dates + '，' + arr[day];
    },
    initMap() {
      let that = this;
	  
      var citys = JSON.parse(localStorage.getItem("citys"));
      if(citys != null && citys != ''){
		for (var i = 0; i< citys.length; i++){
			that.getWeatherData(citys[i]);
		}
	  }	  
	  
    },
    getWeatherData(e) {
	  let that = this;
	  this.citys.push(e);
	  var code = e.code;
	  localStorage.setItem("citys", JSON.stringify(this.citys));
	  $.ajax({
        type: "get",
        url: "https://jingxuan.yoodb.com/prod-api/weather/v1?districtId=" + code,
        success: (msg) => {
		  var data = JSON.parse(msg);
		  console.log(data.result);
          that.mapDatas.push(data.result);
        },
        error: (err) => {
          console.log(err);
        }
      })
      
    },
    changeCity() {
      this.show = true
    },
	onReset(){
		 var x = confirm("确定是否清空历史记录？");
		  if (x){
		localStorage.removeItem("citys");
		    this.$router.go();
			return true;
		}else{
			return false;
		}
		
		
	},
	onCopy() {
	  let that = this;
	  
	  var content = that.localTime + '，天气预报：\n\n';
	  var citys = JSON.parse(localStorage.getItem("citys"));
	  var fds = that.mapDatas;
	  for (var i = 0; i< fds.length; i++){
		 content = content + citys[i].name +' '+ fds[i].forecasts[1].low +'℃ 至 '
		 + fds[i].forecasts[1].high + '℃' +' '+ fds[i].forecasts[1].text_day +' '+ fds[i].forecasts[1].wd_day +' '+ fds[i].forecasts[1].wc_day;
		 if(i+1 != fds.length){
			content = content + '\n\n';
		 }
	  }
	  //alert(content);
      that.$copyText(content).then(
	      e=>{
	        alert('复制成功');
			console.log('复制成功：', e);
	      },
	      e=>{
	        console.log('复制失败：', e);
	      }
      )
    },
    selectCity(e) {
      this.getWeatherData(e[2]);
      this.show = false;
    },
	
  },
};
</script>

<style lang="less" scoped>
.container {
  min-height: 100vh;
  background: #000;
  opacity: 0.7;
  color: #fff;
  font-size: 16px;
  .nav {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  .city-info {
    text-align: left;
	padding: 10px;
    .temp {
      font-size: 18px;
      em {
        font-size: 20px;
        font-style: normal;
      }
    }
  }
  .sjcity{
	padding: 10px;
  }
}
</style>